<template>
  <div class="leftmenu">
    <h3 style="color:white;margin-top: 24px;margin-bottom: 24px;">后台管理系统</h3>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#343638"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="border-right-width:0px;"
      :collapse="ishidden"
      >
      <el-menu-item v-for="item in nochildren" :key="item.label" :index="item.label" v-on:click="routerpush(item)">
        <i :class="`el-icon-${ item.icon }`"></i>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <el-submenu v-for="item in haschildren" :key="item.label" :index="item.label">
        <template slot="title">
          <i :class="`el-icon-${ item.icon }`"></i>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item v-for="child in item.children" :key="child.label" :index="child.label" v-on:click="routerpush(child)">
          {{ child.label }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
    name:"leftmenu",
    computed:{
      ishidden:{
        get(){
          return this.$store.state.menu.ishidden;
        },
        set(v) {
            this.$store.commit(['changeishidden'])
        }
      },
      menudata(){
        return Cookie.get('menu')===undefined ? this.$store.state.menu.menudata : JSON.parse(Cookie.get('menu'))
      },
      nochildren(){
        return this.menudata.filter(item => !item.children)
      },
      haschildren(){
        return this.menudata.filter(item => item.children)
      }
    },
    methods:{
      routerpush(item){
        this.$router.push(item.path)
      }
    }
}

</script>

<style>

</style>